<template>
  <div class="detail">
    <!-- 返回 -->
    <div class="back">
      <van-icon name="arrow-left" @click="back" size="25" />
      <span v-show="!isShow">{{ msg }}</span>
    </div>
    <MusicLaoding v-if="laoding" />
    <div v-else>
      <!-- 背景图片 -->
      <van-sticky offset-top="-150">
        <div class="bgcImg">
          <div class="box" v-show="isShow">
            <div class="like" v-if="like">
              <span style="fontSize:1.5rem" class="iconfont color" @click="songLike">&#xe86f;</span>
            </div>
            <div class="like" v-else>
        

  <span class="iconfont" @click="songLike"> <van-icon tag="i" name="add-square"  /></span>
              <span class="iconfont" @click="songLike">收藏</span>
              
            </div>
            <div class="comment">
              <span class="iconfont" @click="toComment(id)"> <van-icon tag="i" name="chat-o"  /></span
              ><span  class="comment_span" @click="toComment(id)">该歌单评论{{
                total
              }}</span>
            </div>
            <div class="share">
              <span class="iconfont" @click="share"><van-icon name="more-o" /></span>
            </div>
          </div>
          <div class="bgc">
            <img :src="bgcImg + '?param=200y200'" alt="" />
          </div>
          <div class="img_box">
            <div class="img">
              <img :src="bgcImg + '?param=200y200'" alt="" />
              <div class="playCount">
                <span class="iconfont">&#xe628;</span>
                <span v-if="Math.floor(playCount) >= 100000000">
                  {{ Math.floor(playCount / 100000000) }} 亿</span
                >
                <span v-else-if="Math.floor(playCount) >= 10000">
                  {{ Math.floor(playCount / 10000) }} 万</span
                >
                <span v-else> {{ Math.floor(playCount) }} </span>
              </div>
            </div>
            <div class="titel">
              <p class="van-ellipsis">{{ msg }}</p>
              <p class="van-ellipsis fontSize" v-if="uptime">
                <span>{{ uptime }} </span>
              </p>
              <p class="van-ellipsis" v-else>
                <span v-for="item in tags" :key="item">{{ item }} </span>
              </p>
              <p class="van-multi-ellipsis--l2 synopsis">{{ synopsis }}</p>
            </div>
          </div>
        </div>
        <div class="play_box">
          <div class="play">
            <span style="color:#11bf72" class="allplay" @click="playMusic(0)">
              <span    class="iconfont">&#xea82;</span>
            </span>
            <span  class="allPlaytext" @click="playMusic(0)">全部播放</span>
            <span class="Musilength"> ({{ music.length }})</span>
          </div>                                                              
        </div>
      </van-sticky>
      <!-- 音乐列表 -->
      <div class="music_box" v-for="(item, index) in musics" :key="index.id">
        <div  :class="['index', { green: index < 4 }]">{{ index  | formatorder }}</div>
        <div class="text van-ellipsis" @click="playMusic(index)">
          <p class="van-ellipsis">{{ item.name }}</p>
          <p class="van-ellipsis">
            <span style="color:red" class="tagColor" v-if="item.fee == 1 || item.fee == 4"
              >版权
            </span>
            <span class="tagColor" v-else>SQ </span>
            <span>{{ item.ar }}</span>
            -
            <span>{{ item.al }}</span>
          </p>
        </div>
        <div class="slice">
          <VueMusicMenu :id="item.id" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import MusicLaoding from "@/components/common/laoding.vue";
import VueMusicMenu from "@/components/common/menu.vue";
import {
  GetPlaylistlAPI,
  GetsongdetailAPI,
  GetplayListCommentAPI,
} from "@/api/api.js";
import { mapGetters } from "vuex";
export default {
  name: "MusicDetail",
  components: {
    MusicLaoding,
    VueMusicMenu,
  },
  data() {
    return {
      id: this.$route.query.id,
      bgcImg: "",
      msg: "",
      synopsis: "",
      tags: "",
      playCount: 0,
      music: [],
      laoding: true,
      isShow: true,
      musicIds: [],
      uptime: this.$route.query.uptime,
      nickname: "",
      like: false,
      total: 0,
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.songs();
      this.isSongLike();
    });
    window.addEventListener("scroll", this.handleScroll, true);
  },
  computed: {
    musics() {
      const musics = this.music.map((item) => ({
        id: item.id,
        name: item.name,
        picUrl: item.al.picUrl,
        al: item.al.name,
        alId: item.al.id,
        ar: item.ar.map((arItem) => arItem.name).join("/"),
        arList: item.ar.map((item) => ({
          arname: item.name,
          arid: item.id,
        })),
        arId: item.ar[0].id,
        fee: item.fee,
      }));
      return musics;
    },
    ...mapGetters(["songList"]),
  },
  methods: {
    songLike() {
      this.like = !this.like;
      const songVal = {
        id: this.$route.query.id,
        bgc: this.bgcImg,
        msg: this.msg,
        nickname: this.nickname,
      };
      if (this.like) {
        this.$store.commit("SET_ADD_SONG_LIST", songVal);
        Toast("已加入歌单列表！");
      } else {
        Dialog.confirm({
          title: "确定清除歌单？\n",
        })
          .then(() => {
            // on confirm
            for (let i = 0; i < this.songList.length; i++) {
              const element = this.songList[i];
              if (element.id == songVal.id) {
                this.$store.commit("SET_SONG_LIST_SLICE", i);
                Toast("已从歌单列表中清除！");
                return;
              }
            }
          })
          .catch(() => {
            this.like = true;
          });
      }
    },
    back() {
      this.$router.go("-1");
    },
    handleScroll() {
      if (window.pageYOffset >= 150) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
    playMusic(index) {
      this.$store.commit({
        type: "SET_PLAY_MUSIC",
        index: index,
        list: this.musics,
      });
    },
    songs() {
      let id = this.$route.query.id;
      GetPlaylistlAPI({ id }).then((res) => {
        this.trackIds = res.data.playlist.trackIds.length;
        this.nickname = res.data.playlist.creator.nickname;
        this.bgcImg = res.data.playlist.coverImgUrl;
        this.msg = res.data.playlist.name;
        this.synopsis = res.data.playlist.description;
        this.musicIds = res.data.playlist.trackIds;
        this.tags = res.data.playlist.tags;
        this.playCount = res.data.playlist.playCount;
        if (res.status == 200) {
          this.getmusic();
        }
      });
      GetplayListCommentAPI({
        id: this.id,
        limit: 1,
      }).then((res) => {
        if (res.status == 200) {
          this.total = res.data.total;
        }
      });
    },
    getmusic() {
      const ids = this.musicIds.map((item) => ({ id: item.id }));
      const arr = [];
      for (let i = 0; i < ids.length; i++) {
        const element = ids[i].id;
        arr.push(element);
      }
      GetsongdetailAPI({ ids: arr.join() }).then((res) => {
        if (res.status == 200) {
          this.laoding = false;
          this.music = res.data.songs;
        }
      });
    },
    isSongLike() {
      for (let i = 0; i < this.songList.length; i++) {
        const element = this.songList[i];
        if (element.id == this.$route.query.id) {
          this.like = true;
          return;
        }
      }
      this.like = false;
      return;
    },
    toComment(id) {
      this.$router.push({
        path: "/VueMusicPlaylistComment",
        query: {
          id,
          bgcImg: this.bgcImg,
          nickname: this.nickname,
          msg: this.msg,
          t: Date.now(), //刷新相同组件
        },
      });
    },
    share() {
      Toast("未开发！！");
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  background-color: #fff;
  padding-bottom: 0.1875rem;
  .fontSize {
    font-size: 0.8125rem !important;
  }
  .synopsis {
    color: #fafafa !important;
  }
  .back {
    z-index: 999;
    position: fixed;
    top: 0.3125rem;
    left: 0rem;
    height: 2.5rem;
    width: 100%;
    line-height: 2.5rem;
    display: flex;

    .van-icon {
      height: 2.5rem;
      width: 1.875rem;
      font-size: 1.5625rem;
      line-height: 2.5rem;
      color: #fff;
    }
    span:nth-child(2) {
      flex: 1;
      font-size: 0.875rem;
      color: #fff;
      font-weight: bold;
      padding-right: 1.875rem;
    }
  }
  // 背景图片
  .bgcImg {
    position: relative;
    width: 100%;
    height: 12.5rem;
    overflow: hidden;
    .box {
      z-index: 999;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 2.8125rem;
      line-height: 2.8125rem;
      .like {
     span{
       font-size: 0.75rem;
     }
        margin-left: 1.875rem;
       
      }
      .share {
        margin-right: 1.875rem;
      }
      .iconfont {
        
        color: #fafafa;
      }
      .color {
        color: rgb(223, 10, 10);
      }
      .comment {
        display: flex;
        .comment_span {
          margin-left: 0.3125rem;
          color: #fafafa;
          font-size: 0.75rem;
        }
      }
    }
    .bgc {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      filter: blur(0.625rem);
      transform: scale(1.5);
    }
    img {
      width: 100%;
      height: 100%;
    }
    .img_box {
      position: absolute;
      top: 50%;
      left: 1.875rem;
      transform: translate(0, -50%);
      display: flex;
      height: 6.25rem;
      .img {
        position: relative;
        width: 6.25rem;
        height: 6.25rem;
        border-radius: 0.3125rem;
        overflow: hidden;
        margin-right: 0.625rem;
        .playCount {
          position: absolute;
          top: 0.1875rem;
          right: 0.1875rem;
          font-size: 0.75rem;
          color: #fff;
          text-align: left;
          .iconfont {
            font-size: 0.75rem;
          }
        }
      }
      .titel {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        max-width: 14.375rem;
        p {
          width: 100%;
        }

        p:nth-child(1) {
          font-size: 0.875rem;
          text-align: left;
          color: #fff;
        }
        p:nth-child(2) {
          font-size: 0.75rem;
          text-align: left;
          color: #fff;
        }

        p:nth-child(3),
        p:nth-child(4) {
          font-size: 0.75rem;
          text-align: left;
          color: #fff;
        }
      }
    }
  }
  // 播放按钮
  .play_box {
    height: 3.125rem;
    line-height: 3.125rem;
    text-align: left;
    background-color: #fff;
    .allplay {
      display: inline-block;
      width: 1.875rem;
      height: 3.125rem;
      line-height: 3.125rem;
      text-align: center;
      .iconfont {
        font-size: 1.125rem;
      }
    }
    .allPlaytext {
      font-weight: bold;
      font-size: 1rem;
      padding-left: 0.1875rem;
    }
    .Musilength {
      line-height: 3.125rem;
      font-size: 0.75rem;
    }
  }
  // 音乐列表
  .music_box {
    display: flex;
    margin: 0.3125rem 0rem;
    background-color: #fafafa;
    .index {
      width: 1.875rem;
      height: 3.125rem;
      line-height: 3.125rem;
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
      color: grey;
      opacity: .6;
    }
     .green{color: #11bf72}
    .text {
      flex: 1;
      display: flex;
      flex-direction: column;
      p {
        height: 1.5625rem;
        line-height: 1.5625rem;
        text-align: left;
        padding-left: 0.3125rem;
        font-size: 1rem;
        color: #555;
      }
      p:nth-child(2) {
        color: #a0a0a0;
        font-size: 0.75rem;
        .tagColor {
          color: #11bf72;
        }
      }
    }
    .slice {
      width: 3.125rem;
      height: 3.125rem;
    }
  }
}
</style>